
<template>
    <!-- <div>
        <h1>{{ state.count }}--{{ state.age }}--{{ state.name }}</h1>
        <button @click="handleAdd">add</button>
    </div> -->
    <!-- <div @click="changeFlag">
        <h2 v-if="flag">唐杨嘎嘎帅</h2>
        <h2 v-else style="color:red">唐杨嘎嘎帅</h2>
    </div> -->
    <div>
        
        <h2 :class="{'red':flag}"@click='changeClass'>唐杨进大厂</h2>
    </div>
</template>
<script setup>
import { ref,reactive } from 'vue'
// const state=reactive({
//     count:0,
//     age:18,
//     name:'TOM'
// })
// const handleAdd=()=>{
//     state.count++
//     state.age++
//     console.log(state.count);
    
// }
// const flag=ref(true)
// const changeFlag=()=>{
//     flag.value=!flag.value
// }
const flag=ref(true)
const changeClass=()=>{
    flag.value=!flag.value
}

</script>


<style lang="css" scoped>
.red{
    color:red
}
</style>